<template>
	<view class="user-box">
		<u-popup :show="show" :round="10" mode="bottom" :safeAreaInsetBottom="false">
			<view class="contentBox" v-if="toUserInfo">
				<view class="pupup-top">
					<image src="../static/common/icon_close1.png" class="top-left" @click="$emit('close')"></image>
					<image src="../static/common/icon_more.png" class="top-right" @click="showAction=true"></image>
				</view>
				<view class="user-card">
					<!-- 顶部用户信息 -->
					<view class="user-header">
						<view class="header-left">
							<image :src="toUserInfo.avatar" class="avatar" mode="aspectFill"></image>
							<image src="../static/common/icon_vip.png" class="vip-icon" v-if="toUserInfo.vip"></image>
						</view>
						<view class="header-right">
							<view class="username">
								{{toUserInfo.nickname}}
								<view
									:class="toUserInfo.logintime_text=='在线'?'on-line line-green':'on-line line-yellow'">
									<view :class="toUserInfo.logintime_text=='在线'?'dot dot-green':'dot dot-yellow'">
									</view>
									{{toUserInfo.logintime_text}}
								</view>
							</view>
							<view class="real-user" v-if="toUserInfo.auth">
								<image class="real-icon" src="../static/common/real_user.png"></image>
							</view>
						</view>
					</view>
					<!-- 数据统计 -->
					<view class="user-stats">
						<view class="stat-item">
							<text class="stat-num">{{toUserInfo.focus_count}}</text>
							<text class="stat-label">关注</text>
						</view>
						<view class="stat-item">
							<text class="stat-num">{{toUserInfo.fans_count}}</text>
							<text class="stat-label">粉丝</text>
						</view>
					</view>
					<!-- 个性签名 -->
					<view class="signature">
						<text>{{toUserInfo.person_desc}}</text>
					</view>
					<!-- 用户详情 -->
					<view class="user-info">
						<text class="info-item" style="color: #F169F6;">{{toUserInfo.age}}岁</text>
						<text class="info-item" style="color: #9451F3;">{{toUserInfo.city}}</text>
						<text class="info-item" v-if="toUserInfo.distance">{{toUserInfo.distance}}km</text>
						<text class="info-item" v-if="toUserInfo.work">{{toUserInfo.work}}</text>
						<text class="info-item"
							v-if="toUserInfo.height&&toUserInfo.weight">{{toUserInfo.height}}cm/{{toUserInfo.weight}}kg</text>
					</view>
					<!-- 操作按钮 -->
					<view class="action-buttons">
						<view class="action-btn follow-btn" v-if="!toUserInfo.is_focus_count" @click="friendsFollow">
							<u-icon name="heart" color="#ffffff" size="20"></u-icon>关注
						</view>
						<view class="action-btn chat-btn" v-if="toUserInfo.is_focus_count" @click="friendsFollow">
							<u-icon name="plus" size="14"></u-icon>已关注
						</view>
						<view class="action-btn chat-btn" @click="privateChat">
							<u-icon name="chat" size="20"></u-icon>私聊
						</view>
						<view class="action-btn chat-btn" @click="lookWechat" v-if="userInfo&&userInfo.gender==1">
							<u-icon name="weixin-fill" size="20"></u-icon>查看微信
						</view>
					</view>
				</view>
				<view class="tabs-box">
					<view class="tab-list">
						<u-subsection :list="tabs" :current="currentTab" fontSize="14" bgColor="transparent"
							activeBg="#FEECFF" activeColor="#F169F6" @change="sectionChange"></u-subsection>
					</view>
				</view>
				<z-paging ref="paging" v-model="dataList" @query="queryList" height="50vh" :fixed="false"
					:refresher-enabled="false" :auto='false' :default-page-size='9'>
					<view class="dynamics-list">
						<view class="dynamics-item" v-for="(item, index) in dataList" :key="index">
							<view class="item-xsd" v-if="currentTab==0">相似度:{{item.xsd||0}}%</view>
							<view class="item-xsd" v-if="currentTab==1&&item.images_text.length>1">多图</view>
							<image :src="item.data" class="image" mode="aspectFill" @click="showPic(index)"
								v-if="currentTab==0"></image>
							<image :src="item.images_text[0]" class="image" mode="aspectFill" @click="showPic1(item)"
								v-if="currentTab==1"></image>
							<view class="item-dt" v-if="currentTab==1">
								<image src="../static/common/icon_dt.png" class="icon"></image>
								<view>动态</view>
							</view>
						</view>
					</view>
				</z-paging>
			</view>
			<unLockPopup :show="showUnLock" @close="showUnLock=false" @success="unLockSuccess" :to_user_id="user_id">
			</unLockPopup>
			<wechatPopup :show="showWechat" @close="showWechat=false" :userWechat="userWechat"></wechatPopup>
			<u-action-sheet :actions="actionList" :show="showAction" @select="selectAction" cancelText="取消"
				@close="showAction=false"></u-action-sheet>
			<authentication :show="showAuth" @close="showAuth=false" @success="authSuccess"></authentication>
		</u-popup>
	</view>
</template>

<script>
	import {
		mapGetters
	} from "vuex";
	import unLockPopup from '@/components/UnLockPopup.vue';
	import wechatPopup from '@/components/WeChatPopup.vue';
	import authentication from '@/components/Authentication.vue';
	export default {
		name: "UserPopup",
		data() {
			return {
				userInfo: null,
				toUserInfo: null,
				showWechat: false,
				userWechat:null,
				dataList: [],
				showAction: false,
				showUnLock: false,
				showAuth: false,
				tabs: ['相册', '动态'],
				currentTab: 0,
				actionList: [{
						name: '关注',
					},
					{
						name: '拉黑',
					},
					{
						name: '举报', //开启后文字不显示
						color: '#FF3E3E',
					}
				]
			};
		},
		props: {
			show: {
				type: Boolean,
				default: false //是否显示
			},
			user_id: {
				type: [Number, String],
				default: null //解锁用户Id
			}
		},
		computed: mapGetters(['isLogin']),
		watch: {
			show(value) {
				if (value == true) {
					this.currentTab = 0
					if (this.isLogin) {
						this.getUserInfo()
					}
					this.getUserHome()
				} else {
					this.toUserInfo = null
				}
			},
		},
		components: {
			unLockPopup: unLockPopup,
			wechatPopup: wechatPopup,
			authentication: authentication
		},
		
		methods: {
			// 预览图片
			showPic(current) {
				let urls = this.dataList.map(item => {
					return item.data
				})
				uni.previewImage({
					indicator: "none",
					current: current,
					urls: urls
				});
			},
			showPic1(item) {
				uni.previewImage({
					indicator: "none",
					urls: item.images_text
				});
			},
			//提交认证
			authSuccess() {
				this.showAuth = false
				this.$Tips('/pages/authentication/authentication')
			},
			privateChat() {
				if (!this.isLogin) {
					return this.$Tips('/pages/login/login')
				}
				if (this.userInfo.gender == 1) {
					if (this.toUserInfo.is_unlock) {
						this.$Tips('/pages/message/chart-message?user_id=' + this.toUserInfo.id)
					} else if (!this.toUserInfo.is_unlock && this.userInfo.unlock_num != 0) {
						this.confirmUserUnLock(1)
					} else {
						this.showUnLock = true
					}
				} else {
					if (this.userInfo.is_auth != 1) {
						this.showAuth = true
					} else {
						this.$Tips('/pages/message/chart-message?user_id=' + this.toUserInfo.id)
					}
				}
			},
			unLockSuccess(id,type) {
				this.getUserHome()
				this.getUserInfo()
				if(type==1){
					this.showUnLock = false
					this.$Tips('/pages/message/chart-message?user_id=' + id)
				}else{
					this.getUserInfoWx()
				}
			},
			getUserInfo() {
				this.$Api['user'].getUserInfo().then(res => {
					this.userInfo = res.data
				}).catch(error=>{
					this.$Toast('服务器错误或网络异常请刷新重试')
					this.$emit('close')
				})
			},
			confirmUserUnLock(type) {
				this.$Api['user'].subUserUnLock({
					to_user_id: this.user_id,
					type: '1'
				}).then(res => {
					this.unLockSuccess(this.user_id,type)
				})
			},
			getUserInfoWx() {
				this.$Api['user'].getUserInfoWx({
					from_user_id: this.user_id,
				}).then(res => {
					this.userWechat = res.data.wechat
					this.showWechat = true
				})
			},
			lookWechat() {
				if (this.userInfo.gender == 1) {
					if (this.toUserInfo.is_unlock) {
						this.getUserInfoWx()
					} else if (!this.toUserInfo.is_unlock && this.userInfo.unlock_num != 0) {
						this.confirmUserUnLock(2)
					} else {
						this.showUnLock = true
					}
				} else {
					if (this.userInfo.is_auth != 1) {
						this.showAuth = true
					} else {
						this.getUserInfoWx()
					}
				}
			},
			selectAction(e) {
				if (!this.isLogin) {
					return this.$Tips('/pages/login/login')
				}
				if (e.name == '拉黑') {
					this.$Api['user'].editBlackUser({
						session_user_id: this.user_id,
					}).then(res => {
						this.$Toast('加入黑名单成功')
					})
				}
				if (e.name == '关注' || e.name == '取消关注') {
					this.friendsFollow()
				}
				if (e.name == '举报') {
					this.$Tips('/pages/report/report?user_id=' + this.user_id)
				}
			},
			//用户关注
			friendsFollow() {
				this.$Api['user'].friendsFollow({
					user_id: this.user_id
				}).then(res => {
					this.$emit('followSuccess')
					this.getUserHome()
				})
			},
			getUserHome() {
				this.$Api['user'].getUserHome({
					user_id: this.user_id
				}).then(res => {
					this.toUserInfo = res.data
					if (this.toUserInfo.is_focus_count) {
						this.actionList[0].name = '取消关注'
					} else {
						this.actionList[0].name = '关注'
					}
					this.queryList(1, 9)
				})
			},
			refreshList() {
				this.$refs.paging.scrollToTop()
				this.$refs.paging.reload();
			},
			sectionChange(index) {
				this.currentTab = index;
				this.dataList = []
				this.refreshList()
			},
			queryList(pageNo, pageSize) {
				this.$nextTick(() => {
					if (this.currentTab == 0) {
						if (this.$refs.paging) {
							this.$refs.paging.complete(this.toUserInfo.images);
						}
					} else {
						this.$Api.user.getOrtherForumList({
							page: pageNo,
							limit: pageSize,
							user_id: this.user_id
						}).then(res => {
							this.$refs.paging.complete(res.data.data);
						}).catch(res => {
							this.$refs.paging.complete(false);
						})
					}
				})
			},
		}
	}
</script>
<style lang="scss" scoped>
	.contentBox {
		.pupup-top {
			padding: 44rpx 30rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.top-left {
				width: 28rpx;
				height: 28rpx;
			}

			.top-right {
				width: 6rpx;
				height: 28rpx;
			}
		}

		.user-card {
			padding: 0 30rpx 30rpx;

			.user-header {
				display: flex;
				align-items: center;

				.header-left {
					position: relative;

					.avatar {
						width: 128rpx;
						height: 128rpx;
						border-radius: 50%;
					}

					.vip-icon {
						width: 94rpx;
						height: 28rpx;
						position: absolute;
						bottom: 0;
						left: 50%;
						transform: translateX(-50%);
					}
				}

				.header-right {
					margin-left: 20rpx;

					.username {
						font-size: 32rpx;
						color: #323334;
						display: flex;
						align-items: center;
					}

					.on-line {
						margin-left: 10rpx;
						padding: 4rpx 10rpx;
						background: #F6F6F6;
						border-radius: 6rpx;
						font-size: 24rpx;
						display: flex;
						align-items: center;
						justify-content: center;

						.dot {
							width: 8rpx;
							height: 8rpx;
							border-radius: 50%;
							margin-right: 4rpx;
						}
					}

					.line-green {
						color: #28C445;
					}

					.dot-green {
						background: #28C445;
					}

					.line-yellow {
						color: #FFC210;
					}

					.dot-yellow {
						background: #FFC210;
					}

					.real-user {
						width: 72rpx;
						height: 26rpx;
						background: #F169F6;
						border-radius: 20rpx;
						margin-top: 8rpx;
						display: flex;
						align-items: center;
						justify-content: center;

						.real-icon {
							width: 61rpx;
							height: 26rpx;
						}
					}
				}
			}

			.user-stats {
				display: flex;
				margin-top: 20rpx;
				margin-bottom: 20rpx;

				.stat-item {
					margin-right: 40rpx;
					display: flex;
					align-items: baseline;

					.stat-num {
						font-size: 16px;
						font-weight: 600;
						margin-right: 8rpx;
					}

					.stat-label {
						font-size: 28rpx;
						color: #666666;
					}
				}
			}

			.signature {
				font-size: 28rpx;
				color: #3e3e3e;
				margin-bottom: 20rpx;
			}

			.user-info {
				display: flex;
				flex-wrap: wrap;
				gap: 16rpx;
				margin-bottom: 24rpx;

				.info-item {
					font-size: 24rpx;
					padding: 4rpx 10rpx;
					color: #666666;
					display: flex;
					align-items: center;
					background: #F6F6F6;
					border-radius: 6rpx;
				}
			}

			.action-buttons {
				display: flex;
				gap: 18rpx;

				.action-btn {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 216rpx;
					height: 76rpx;
					line-height: 40rpx;
					font-size: 28rpx;
					border-radius: 20rpx;
				}

				.follow-btn {
					color: #fff;
					background: linear-gradient(to right bottom, #fcd7ff, #e09aff);
				}

				.chat-btn {
					background: #ececec;
				}
			}
		}

		.tabs-box {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx 30rpx;
			border-bottom: 1px solid #f5f5f5;
			position: relative;
			z-index: 10;

			.tab-list {
				width: 60%;
			}

			.filter {
				display: flex;
				align-items: center;
				gap: 4rpx;
				font-size: 28rpx;
				color: #666;
			}
		}

		.dynamics-list {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			grid-auto-flow: row;
			grid-gap: 2rpx;

			.dynamics-item {
				height: 300rpx;
				position: relative;

				.item-xsd {
					position: absolute;
					left: 10rpx;
					top: 10rpx;
					z-index: 10;
					padding: 0 10rpx;
					height: 40rpx;
					text-align: center;
					line-height: 40rpx;
					font-size: 20rpx;
					background: rgba(0, 0, 0, 0.3);
					border-radius: 8rpx;
					color: #ffffff;
				}

				.item-dt {
					position: absolute;
					display: flex;
					align-items: center;
					left: 16rpx;
					bottom: 10rpx;
					z-index: 10;
					padding: 0 16rpx;
					height: 40rpx;
					text-align: center;
					line-height: 40rpx;
					font-size: 20rpx;
					background: rgba(0, 0, 0, 0.3);
					border-radius: 8rpx;
					color: #ffffff;

					.icon {
						width: 24rpx;
						height: 24rpx;
						margin-right: 8rpx;
					}
				}

				.image {
					width: 100%;
					height: 100%;
				}
			}
		}
	}
</style>